<script setup lang="ts">
import { computed } from 'vue';
import StatCard from '@/components/common/stat-card.vue';

// 定义props
interface Props {
  totalData:
    | {
        tasksNum: number;
        nodesNum: number;
        consumeAve: number;
        successRate: number;
      }
    | undefined;
}
const props = defineProps<Props>();

defineOptions({
  name: 'CardData'
});

interface CardData {
  key: string;
  title: string;
  value: number;
  unit: string;
  type: 'primary' | 'success' | 'warning' | 'error' | 'default';
  icon: string;
  desc?: string;
}

// 基于props数据生成卡片信息
const cardData = computed<CardData[]>(() => {
  // 从props获取数据，如果没有则使用默认值
  const { tasksNum = 0, nodesNum = 0, consumeAve = 0, successRate = 0 } = props.totalData || {};

  return [
    {
      key: 'tasksNum',
      title: '总任务数',
      value: tasksNum,
      unit: '',
      type: 'primary',
      icon: 'ant-design:bar-chart-outlined',
      desc: '当前系统中的任务总数'
    },
    {
      key: 'nodesNum',
      title: '节点数量',
      value: nodesNum,
      unit: '',
      type: 'success',
      icon: 'ant-design:node-index-outlined',
      desc: '可用计算节点数量'
    },
    {
      key: 'consumeAve',
      title: '平均耗时',
      value: consumeAve,
      unit: 'ms',
      type: 'warning',
      icon: 'ant-design:clock-circle-outlined',
      desc: '任务平均执行时间'
    },
    {
      key: 'successRate',
      title: '成功率',
      value: successRate * 100,
      unit: '%',
      type: 'error',
      icon: 'ant-design:check-circle-outlined',
      desc: '任务成功执行比例'
    }
  ];
});
</script>

<template>
  <ARow :gutter="[13, 13]">
    <ACol v-for="item in cardData" :key="item.key" :span="24" :sm="12" :md="12" :lg="6" :xl="6">
      <StatCard
        :type="item.type"
        :title="item.title"
        :value="`${item.value.toLocaleString()}${item.unit}`"
        :desc="item.desc"
      >
        <template #icon>
          <SvgIcon :icon="item.icon" class="text-white" />
        </template>
      </StatCard>
    </ACol>
  </ARow>
</template>

<style scoped></style>
